<template>
  <div>

    <scroller v-if="tabbarValue == 1" lock-x>
      <ul style="margin-top:0.25rem;width:100%;">
        <div v-if="!carList.length" style="display:flex;align-items:center;width:100%;">
          <div style="flex:1;border-top:1px solid #ccc;"></div>
          <div style="margin:0 0.5rem;font-size:0.4rem;color:#686868;">暂无绑定车辆</div>
          <div style="flex:1;border-top:1px solid #ccc;"></div>
        </div>
        <li v-for="v in carList" v-else style="margin:0 8px;">
          <mt-cell style="margin-top:15px">
            <span slot="title" style="font-size:18px">{{v.carNumber}}</span>
            <mt-button type="primary" size="small" style="background-color:#00c9b2;" @click="unbind(v.id)">解绑</mt-button>
          </mt-cell>
        </li>
      </ul>
    </scroller>

    <div v-if="tabbarValue == 2">
      <div style="display:flex;align-items:center;width:100%;margin-top:15px;margin-bottom:25px">
        <div style="flex:1;border-top:1px solid #ccc;"></div>
        <div style="margin:0 0.5rem;font-size:0.8rem;color:#686868;">绑定车牌</div>
        <div style="flex:1;border-top:1px solid #ccc;"></div>
      </div>
      <div v-if='oldlicence' style="display:flex;padding:0.2rem;margin:0.2rem;">
        <div @click="showKeyboard(0)" :style="{borderColor:inputIndex==0 && popupKeyboard ? 'red':'#E2E2E2'}"
             style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
          {{car_number[0]}}
        </div>
        <div @click="showKeyboard(1)" :style="{borderColor:inputIndex==1 && popupKeyboard ? 'red':'#E2E2E2'}"
             style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.5em;background:#f1eded">
          {{car_number[1]}}
        </div>
        <div @click="showKeyboard(2)" :style="{borderColor:inputIndex==2 && popupKeyboard ? 'red':'#E2E2E2'}"
             style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
          {{car_number[2]}}
        </div>
        <div @click="showKeyboard(3)" :style="{borderColor:inputIndex==3 && popupKeyboard ? 'red':'#E2E2E2'}"
             style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
          {{car_number[3]}}
        </div>
        <div @click="showKeyboard(4)" :style="{borderColor:inputIndex==4 && popupKeyboard ? 'red':'#E2E2E2'}"
             style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
          {{car_number[4]}}
        </div>
        <div @click="showKeyboard(5)" :style="{borderColor:inputIndex==5 && popupKeyboard ? 'red':'#E2E2E2'}"
             style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
          {{car_number[5]}}
        </div>
        <div @click="showKeyboard(6)" :style="{borderColor:inputIndex==6 && popupKeyboard ? 'red':'#E2E2E2'}"
             style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
          {{car_number[6]}}
        </div>
      </div>
      <div v-if='newlicence' style="display:flex;padding:0.2rem;margin:0.2rem;">
        <div @click="showKeyboard(0)" :style="{borderColor:inputIndex==0 && popupKeyboard ? 'red':'#E2E2E2'}"
             style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
          {{car_number[0]}}
        </div>
        <div @click="showKeyboard(1)" :style="{borderColor:inputIndex==1 && popupKeyboard ? 'red':'#E2E2E2'}"
             style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.5em;background:#f1eded">
          {{car_number[1]}}
        </div>
        <div @click="showKeyboard(2)" :style="{borderColor:inputIndex==2 && popupKeyboard ? 'red':'#E2E2E2'}"
             style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
          {{car_number[2]}}
        </div>
        <div @click="showKeyboard(3)" :style="{borderColor:inputIndex==3 && popupKeyboard ? 'red':'#E2E2E2'}"
             style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
          {{car_number[3]}}
        </div>
        <div @click="showKeyboard(4)" :style="{borderColor:inputIndex==4 && popupKeyboard ? 'red':'#E2E2E2'}"
             style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
          {{car_number[4]}}
        </div>
        <div @click="showKeyboard(5)" :style="{borderColor:inputIndex==5 && popupKeyboard ? 'red':'#E2E2E2'}"
             style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
          {{car_number[5]}}
        </div>
        <div @click="showKeyboard(6)" :style="{borderColor:inputIndex==6 && popupKeyboard ? 'red':'#E2E2E2'}"
             style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
          {{car_number[6]}}
        </div>
        <div @click="showKeyboard(7)" :style="{borderColor:inputIndex==7 && popupKeyboard ? 'red':'#E2E2E2'}"
             style="border:1px solid #E2E2E2;width:1rem;height:1rem;font-size:0.4rem;display:flex;align-items:center;justify-content:center;margin-right:.1em;background:#f1eded">
          {{car_number[7]}}
        </div>
      </div>
      <div style="display:flex;float:right;padding-right:0.6rem;margin-top:10px;">
        <p style="height:1rem;line-height: 1rem;padding:.1rem;color:#777777;font-size:0.4rem">是否新能源</p>
        <x-switch title="" @on-change='neworold' v-model="switchvalue"></x-switch>
      </div>

      <div v-transfer-dom>
        <popup v-model="popupKeyboard" position="top" :popup-style="{backgroundColor:'#fff', marginTop:'3rem'}"
               :is-transparent="true">
          <div class="char-line" v-for="o in keyboard[car_number_type[inputIndex]]">
            <div v-for="p in o" @click="touchKeyboard">{{p}}</div>
          </div>
        </popup>
      </div>
      <div style="background-color:#46D0C3;text-align:center;position:fixed;right:0;left:0;bottom:55px;">
        <div style="color:#fff;padding:0.3rem;font-size:0.5rem" @click="bind">绑 定</div>
      </div>
    </div>

    <table v-if="tabbarValue == 3" style="width:100%;table-layout:fixed;font-size:0.4rem;" border="0" cellspacing="0" cellpadding="0">
      <tr style="height:1rem;">
        <td style="border-bottom:1px solid #e1e1e1;padding-left:0.25rem;">车牌号码</td>
        <td style="border-bottom:1px solid #e1e1e1;">抵扣金额</td>
        <td style="border-bottom:1px solid #e1e1e1;">抵扣积分</td>
        <td style="border-bottom:1px solid #e1e1e1;">抵扣时间</td>
      </tr>
      <tbody>
      <template v-for="model in deductionList">
        <tr  style="height:1rem;" >
          <td style="white-space:nowrap;overflow:hidden;word-break:keep-all;text-overflow:ellipsis;border-bottom:1px solid #e1e1e1">{{model.carNumber}}</td>
          <td style="white-space:nowrap;overflow:hidden;word-break:keep-all;text-overflow:ellipsis;border-bottom:1px solid #e1e1e1">{{model.deductionCost}}</td>
          <td style="white-space:nowrap;overflow:hidden;word-break:keep-all;text-overflow:ellipsis;border-bottom:1px solid #e1e1e1">{{model.deductionPoints}}</td>
          <td style="white-space:nowrap;overflow:hidden;word-break:keep-all;text-overflow:ellipsis;border-bottom:1px solid #e1e1e1">{{model.bizDate}}</td>
        </tr>
      </template>
      </tbody>
    </table>

    <ul v-if="tabbarValue == 4" style="margin-top:0.25rem;width:100%;">
      <li style="margin:0 8px;">
        <mt-cell style="margin-top:15px">
          <span slot="title" style="font-size:18px">{{isConsume?'积分抵扣停车费':'积分不抵扣停车费'}}</span>
          <mt-switch v-model="isConsume" @change="changeSwitch"></mt-switch>
        </mt-cell>
      </li>
    </ul>

    <mt-tabbar :fixed="true" v-model="tabbarValue">
      <mt-tab-item id="1">
        <img slot="icon" src="static/img/cheliangliebiao.png">
        车辆列表
      </mt-tab-item>
      <mt-tab-item id="2">
        <img slot="icon" src="static/img/cheliangxinxi.png">
        绑定车辆
      </mt-tab-item>
      <mt-tab-item id="3">
        <img slot="icon" src="static/img/deduction.png">
        抵扣记录
      </mt-tab-item>
      <mt-tab-item id="4">
        <img slot="icon" src="static/img/shezhi.png">
        设置
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
  import {Indicator, Toast,MessageBox} from 'mint-ui';
  import _ from 'lodash';
  import {
    TransferDom,
    Popup,
    Scroller,
    XSwitch
  } from 'vux';
  import {
    mapState,
  } from 'vuex';

  export default {
    name: "myCar",
    directives: {
      TransferDom
    },
    components: {
      Popup,
      Scroller,
      XSwitch
    },
    data() {
      return {
        tabbarValue: '1',
        isConsume: true,
        carList: [],
        oldlicence: true,
        newlicence: false,
        switchvalue: false,
        car_number: [],
        intro: '',
        car_number_type: ['1', '2', '3', '3', '3', '3', '3', '4'],
        keyboard: {
          '1': [
            ['冀', '豫', '云', '辽'],
            ['黑', '湘', '皖', '鲁'],
            ['新', '苏', '浙', '赣'],
            ['鄂', '桂', '甘', '晋'],
            ['蒙', '陕', '吉', '闽'],
            ['贵', '粤', '川', '青'],
            ['藏', '琼', '宁', '渝'],
            ['京', '津', '沪'],
          ],
          '2': [
            ['A', 'B', 'C', 'D', 'E'],
            ['F', 'G', 'H', 'I', 'J'],
            ['K', 'L', 'M', 'N', 'O'],
            ['P', 'Q', 'R', 'S', 'T'],
            ['U', 'V', 'W', 'X', 'Y'],
            ['Z', '后退'],
          ],
          '3': [
            ['1', '2', '3', '4', '5'],
            ['6', '7', '8', '9', '0'],
            ['A', 'B', 'C', 'D', 'E'],
            ['F', 'G', 'H', 'I', 'J'],
            ['K', 'L', 'M', 'N', 'O'],
            ['P', 'Q', 'R', 'S', 'T'],
            ['U', 'V', 'W', 'X', 'Y'],
            ['Z', '后退', '关闭'],
          ],
          '4': [
            ['1', '2', '3', '4', '5'],
            ['6', '7', '8', '9', '0'],
            ['A', 'B', 'C', 'D', 'E'],
            ['F', 'G', 'H', 'I', 'J'],
            ['K', 'L', 'M', 'N', 'O'],
            ['P', 'Q', 'R', 'S', 'T'],
            ['U', 'V', 'W', 'X', 'Y'],
            ['Z', '后退', '删除', '关闭'],
          ]
        },
        popupKeyboard: false,
        inputIndex: 0,
        deductionList: []
      }
    },
    computed: {
      ...mapState({
        member_id: state => state.member_id,
      }),
    },
    watch: {
      //监听tabbarValue的变换
      tabbarValue(val, oldVal) {
        if (val == 1) {
          this.findCarList();
        }
      }
    },
    methods: {
      findCarList() {
        Indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        });
        var memberId = this.member_id;
        this.$http.get(`/api/member/car/` + memberId).then((res) => {
          this.carList = res.data;
          Indicator.close();
          Indicator.close();
        }).catch(function (error) {
          console.log(error);
        });
      },
      // 解绑
      unbind(id){
        MessageBox.confirm('确定解绑该车?').then(action => {
          this.$http.get(`/api/member/car/unbind/` + id).then((res) => {
            Toast({
              message: '操作成功！'
            });
            this.findCarList();
          }).catch(function (error) {
            console.log(error);
          });
        });
      },
      bind() {
        var carNumber = '';
        var numberLen = 0;
        if (this.oldlicence) {
          numberLen = 7;
        } else {
          numberLen = 8;
        }
        for (var i = 0; i < numberLen; i++) {
          var ele = this.car_number[i];
          if (!ele) {
            Toast({
              message: '请输入有效的车牌！'
            });
            return;
          } else {
            carNumber += ele;
          }
        }
        this.$http.post(`/api/member/car/bind`,{
          memberId: this.member_id,
          carNumber: carNumber
        }).then((res) => {
          if (res.data == 1) {
            Toast({
              message: '绑定成功！'
            });
          } else {
            MessageBox('操作失败', '该车牌已经被绑定！');
          }

         consoel.log(res);
        }).catch(function (error) {
          console.log(error);
        });
        console.log(carNumber)
      },
      neworold(value) {
        if (value) {
          this.oldlicence = false
          this.newlicence = true
        } else {
          this.oldlicence = true
          this.newlicence = false
        }
      },
      showKeyboard(index) {
        this.inputIndex = index;
        this.popupKeyboard = true;
      },
      touchKeyboard({
                      target
                    }) {
        const value = _.trim(target.innerText);
        let car_number = [
          ...this.car_number
        ];
        if (value == '删除') {
          car_number[this.inputIndex] = '';
          this.popupKeyboard = false;
        } else if (value == '后退') {
          car_number[this.inputIndex] = '';
          this.inputIndex--;
        } else if (value == '关闭') {
          this.popupKeyboard = false;
        } else {
          car_number[this.inputIndex] = value;
          this.inputIndex++;
          if (this.newlicence) {
            if (this.inputIndex > 7) {
              this.popupKeyboard = false;
            }
          }
          if (this.oldlicence) {
            if (this.inputIndex > 6) {
              this.popupKeyboard = false;
            }
          }
        }
        this.car_number = car_number;
      },
      findDeductionList() {
        Indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        });
        var memberId = this.member_id;
        this.$http.get(`/api/member/car/deduction/` + memberId).then((res) => {
          this.deductionList = res.data;
          console.log(res)
          Indicator.close();
        }).catch(function (error) {
          console.log(error);
        });
      },
      findSwitch(){
        this.$http.get(`/api/member/car/setting/`+this.member_id).then((res) => {
          if (res.data.autoOffsetParkingRate == 1) {
            this.isConsume = true;
          } else {
            this.isConsume = false;
          }
          console.log(this.isConsume)
        }).catch(function (error) {
          Toast({
            message: '查询失败！'
          });
        });
      },
      changeSwitch(val){
        // 已经有绑定车辆了，那么就可以修改
        if (this.carList.length > 0) {
          this.$http.post(`/api/member/car/setting`,{
            memberId: this.member_id,
            autoOffsetParkingRate: this.isConsume?1:0
          }).then((res) => {
            Toast({
              message: '操作成功！'
            });
          }).catch(function (error) {
            Toast({
              message: '操作失败！'
            });
          });
        }
      }
    },
    async mounted() {
      document.title = '我的车辆';
      this.findCarList();
      this.findDeductionList();
      this.findSwitch();
    }
  }
</script>

<style scoped>
  .mint-header {
    background-color: rgba(0, 0, 0, 0);
    color: #686868;
    font-size: 16px;
  }

  .char-line {
    display: flex;
    justify-content: space-around;
  }

  .char-line > div {
    width: 1rem;
    font-size: 0.5rem;
    padding: 0.3rem;
    text-align: center;
  }

  .mint-tabbar > .mint-tab-item.is-selected {
    background-color: #eaeaea;
    color: #46D0C3;
  }

  .mint-switch-input:checked + .mint-switch-core {
    border-color: red;
    background-color: #red;
  }

  /*.mint-switch-input:checked + .mint-switch-core {*/
  /*border-color: #46D0C3!import;*/
  /*background-color: #46D0C3!import;*/
  /*}*/
</style>
